iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

JavaScript專案學習筆記系列 第 5

JavaScript專案學習筆記 -Flex Panel 5/30天

  • 分享至 

  • xImage
  •  

感謝https://javascript30.com/的免費教程

Demo:http://codepen.io/FutureFronterAndy/pen/KNrmbx

學習點:


<script>
const panels=document.querySelectorAll(".panel");

function toggleOpen(){
console.log('Hi');

this.classList.toggle('open');

}
function toggleActive (argument) {
// body... 
console.log(argument.propertyName);
if(argument.propertyName.includes('flex-grow')){
this.classList.toggle('open-acive');

}

}
panels.forEach(panel=>panel.addEventListener('click', toggleOpen));
panels.forEach(panel=>panel.addEventListener('transitionend', toggleActive));


</script>

js中使用toggle,簡單易懂


if(argument.propertyName.includes('flex-grow')){
this.classList.toggle('open-acive');

includes為包含參數中有包含flex-grow


.panel > *:first-child {
transform: translateY(-100%);
}

.panel.open-acive > *:first-child {
transform: translateY(0);
}

.panel > *:last-child {
transform: translateY(100%);
}

.panel.open-acive > *:last-child {
transform: translateY(0);
}

比較特別,對於last-child, 和fisrt-child的動畫做設定


上一篇
JavaScript專案學習筆記 -陣列方法練習 4/30天
下一篇
JavaScript專案學習筆記 -抓取json檔案 6/30天
系列文
JavaScript專案學習筆記7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言